<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view class="setMenu-top">
			<view class="setMenu-top-img">
				<image src="/static/o3.png" mode=""></image>
			</view>
			<view class="setMenu-pst">
				<view class="psts">
					<view class="psts-top">充值余额尽享优惠</view>
					<view class="psts-btn">
						<view class="psts-btn-img">
							<image src="/static/bj.png" mode=""></image>
						</view>
						<view class="psts-btn-txt" @click="DanMu">发布弹幕</view>
					</view>
					<view class="psts-view">
						<maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight"
							:animationScroll="animationScroll" :animation="animation">
							<template v-slot="{line}">
								<view class="line">{{line.author}} 获得 {{line.subject}}</view>
							</template>
						</maoScroll>
					</view>
				</view>
			</view>
			<view class="setMenu-tc">
				<image src="/static/o2.png" mode=""></image>
				<view class="setMenu-tc-li">
					<view class="tc-li">
						<view class="tc-lis" style="margin-left: 25rpx;margin-top: 25rpx;">
							<view class="tc-lis-one">【无限量】家庭畅想48个月套餐</view>
							<view class="tc-lis-two">超高性价比的 家庭版 行走宽带</view>
							<view class="tc-lis-san">0.36 <span>元/天</span></view>
							<view class="tc-lis-si">已售 <span>990825</span></view>
						</view>
						<view class="tc-lis" style="margin-right: 25rpx;margin-top: 25rpx;">
							<view class="tc-lis-one">【无限量】家庭畅想48个月套餐</view>
							<view class="tc-lis-two">超高性价比的 家庭版 行走宽带</view>
							<view class="tc-lis-san">0.36 <span>元/天</span></view>
							<view class="tc-lis-si">已售 <span>990825</span></view>
						</view>
					</view>
				</view>
			</view>

			<view class="setMenu-dg">
				<view class="dg-one">套餐订购</view>
				<view class="dg-two">
					<ms-tabs style="background: no-repeat;" :list="list2" v-model="active2"
						:lineAnimated="false"></ms-tabs>
				</view>
			</view>

			<view class="setMenu-lis">
				<view class="liss" v-for="(item,index) in List" :key="index">
					<view class="liss-one">{{item.thaliName}}</view>
					<view class="liss-two">{{item.thaliTitle}}</view>
					<view class="liss-san">{{item.thaliDescribe}}</view>
					<view class="liss-si">{{item.payAmount}}<span>元月</span></view>
					<view class="liss-wu" @click="DingGou">立即订购</view>
				</view>
				
				<view v-if="List.length == 0" style="width: 100%;">
					<view class="kong">
						<image src="/static/zwsj.png" mode=""></image>
					</view>
					<view class="kong-txt">暂无数据</view>
				</view>
			</view>
		</view>
		
		<!-- 发布弹幕 -->
		<uni-popup ref="popup_DM" background-color="#fff" borderRadius="10rpx">
			<view style="width: 500rpx;border-radius: 15rpx;padding: 20rpx 30rpx;background: #fff;">
				<view style="text-align: center;padding-top: 10rpx;font-size: 32rpx;font-weight: 600;">发布弹幕</view>
				<view style="font-size: 28rpx;padding-top: 20rpx;padding-bottom: 30rpx;">
					<!-- <uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle"
						placeholder="请输入弹幕" @input="input"></uni-easyinput> -->
				</view>
				<view
					style="width: 100%;border: 2rpx solid #eee;text-align: center;height: 70rpx;border-radius: 10rpx;line-height: 70rpx;font-size: 26rpx;background: #409EFF;color: #fff;"
					@click="FaBu">发布</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	export default {
		components: {
			maoScroll
		},
		data() {
			return {
				windowHeight: "200px",
				title: 'Hello',
				data: [],
				count: 10,
				showNum: 3,
				lineHeight: 60,
				animationScroll: 800,
				animation: 2000,

				list2: [{
					id:0,
					title: '体验套餐'
				}, {
					id:1,
					title: '基础套餐'
				}, {
					id:4,
					title: '年包'
				}, {
					id:5,
					title: '加油包'
				}],
				active2: 0,
				
				thaliTypeId:'',	//套餐类型
				List:[]
			}
		},
		watch: {
			active2() {
				console.log(this.list2[this.active2].id) // 0
				this.thaliTypeId = this.list2[this.active2].id
				this.thaliDevice()	//获取套餐
			}
		},
		onLoad() {
			this.GaoDu() //判断手机高度
			console.log('init');
			console.log(this.data, '初始化数据 空数据');
			let self = this;
			setTimeout(function() {
				console.log('模拟从网上获取数据 花费了1秒');
				self.createData();
				console.log(self.data, '获取到的数据');
			}, 1000);
		},
		onShow() {
			this.thaliTypeId = this.list2[0].id
			this.thaliDevice()	//获取套餐
			
		},
		methods: {
				//获取套餐
			thaliDevice(){
				const value = uni.getStorageSync('iponeInfo');
				this.$REQ(this.$api.thaliDevice, {
					deviceNo: value.deviceNo,
					thaliTypeId:this.thaliTypeId,
				}, 'POST').then(res => {
					console.log(res)
					this.List = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 弹幕
			DanMu() {
				this.$refs.popup_DM.open()
			},
			// 发布弹幕
			FaBu(){
				this.$refs.popup_DM.close()
				uni.showToast({
					title: '发布成功',
					icon: 'none',
					duration: 1000
				});
			},
			
			// 立即订购
			DingGou() {
				
				
				uni.navigateTo({
					url: '/pages/index/setDetaile'
				});
			},

			createData: function() {
				for (let i = 1; i <= this.count; i++) {
					this.data.push({
						author: 'MaoUI',
						subject: 'OnePlus手机 * ' + i + '部'
					})
				}
			},
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		// background: #ECF4FF;
	}

	page {
		background: #ECF4FF;
	}
	.kong{
		margin: auto;
		width: 200rpx;
		height: 200rpx;
		padding-top: 50rpx;
	}
	.kong image{
		width: 100%;
		height: 100%;
	}
	.kong-txt{
		text-align: center;
		font-size: 28rpx;
		padding-top: 30rpx;
		color: #B6BAC0;
	}
	.setMenu-top {
		width: 100%;
		height: 380rpx;
		position: relative;
	}

	.setMenu-top-img {
		width: 100%;
		height: 380rpx;
	}

	.setMenu-top-img image {
		width: 100%;
		height: 100%;
	}

	.setMenu-pst {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.psts {
		padding: 28rpx;
	}

	.psts-top {
		font-size: 48rpx;
		font-weight: 600;
		color: #03348D;
	}

	.psts-btn {
		display: flex;
		width: 250rpx;
		height: 60rpx;
		background: #01358B;
		margin-top: 20rpx;
		border-radius: 100rpx;
	}

	.psts-btn-img {
		width: 30rpx;
		height: 30rpx;
		padding-left: 35rpx;
		padding-top: 12rpx;
	}

	.psts-btn-img image {
		width: 100%;
		height: 100%;
	}

	.psts-btn-txt {
		color: #fff;
		font-size: 26rpx;
		line-height: 60rpx;
		padding-left: 15rpx;
	}

	.psts-view {
		padding-top: 20rpx;
	}

	.psts-li {
		display: flex;
		border: 3rpx solid #D1ECFE;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
		margin-bottom: 20rpx;
	}

	.psts-li-img {
		width: 40rpx;
		height: 40rpx;
	}

	.psts-li-img image {
		width: 100%;
		height: 100%;
	}

	.psts-li-txt {
		font-size: 28rpx;
		color: #3D6592;
		padding-left: 20rpx;
	}

	.setMenu-tc {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.setMenu-tc image {
		width: 100%;
		height: 100%;
	}

	.setMenu-tc-li {
		position: absolute;
		top: 90rpx;
		left: 0rpx;
		display: flex;
		width: 100%;
	}

	.tc-li {

		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;

		width: 100%;
	}

	.tc-lis {
		border: 3rpx solid #01358B;
		padding: 25rpx;

		width: 38%;
		border-radius: 20rpx;
	}

	.tc-lis-one {
		font-weight: 600;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tc-lis-two {
		font-size: 26rpx;
		padding-top: 15rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 10rpx;
	}

	.tc-lis-san {
		font-size: 38rpx;
		font-weight: 600;
		color: red;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 10rpx;
	}

	.tc-lis-san span {
		font-size: 30rpx;
		font-weight: 500;
	}

	.tc-lis-si {
		float: right;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 10rpx;
	}

	.tc-lis-si span {
		color: #D4A34C;
		padding-left: 10rpx;
	}

	.setMenu-dg {}

	.dg-one {
		font-size: 36rpx;
		font-weight: 600;
		padding: 30rpx 26rpx;
	}

	.dg-two {}

	.setMenu-lis {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 25rpx;
	}

	.liss {
		border-radius: 15rpx;
		border: 3rpx solid #D6DEE9;
		padding: 25rpx;
		width: 40%;
		margin-bottom: 20rpx;
	}

	.liss-one {
		font-size: 28rpx;
		font-weight: 600;
	}

	.liss-two {
		font-size: 26rpx;
		background: #D9E8FF;
		border: 3rpx solid #80AAE6;
		border-radius: 15rpx;
		color: #80aae6;
		padding: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.liss-san {
		font-size: 26rpx;
		padding-bottom: 10rpx;
	}

	.liss-si {
		font-size: 36rpx;
		color: #FA5365;
		font-weight: 600;
	}

	.liss-si span {
		font-size: 26rpx;
		font-weight: 500;
		padding-left: 10rpx;
	}

	.liss-wu {
		background: #FD5792;
		width: 200rpx;
		height: 70rpx;
		font-size: 28rpx;
		color: #E7C3B7;
		border-radius: 100rpx;
		text-align: center;
		line-height: 70rpx;
		margin-top: 20rpx;
	}

	@import url("@/pages/css.css");
</style>